<template>
  <div id="app">
    <div class="form-container">
      <SectionEl :title="'线索信息'" />
      <el-form label-position="top" :model="leadsData">
        <el-row :gutter="20" style="margin-top: 12px">
          <el-col :span="12">
            <el-form-item label="线索名称" prop="name">
              <el-input v-model="leadsData.leadsName" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="线索来源">
              <el-select v-model="leadsData.leadsSource">
                <template v-for="item in leadsSourceList" :key="item.value">
                  <el-option :label="item.label" :value="item.value" />
                </template>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="手机" prop="phone">
              <el-input v-model="leadsData.phone" :prefix-icon="Iphone" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="负责人">
              <OwnerChange v-model="leadsData.ownerUserId" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="电话" prop="telephone">
              <el-input v-model="leadsData.telephone" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮箱">
              <el-input v-model="leadsData.email" :prefix-icon="Message" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="地址">
              <!-- <el-input style="margin-bottom: 20px" v-model="addy" /> -->
              <AddressSelect v-model="leadsData.address" :width="'415px'" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户行业">
              <el-select v-model="leadsData.customerField">
                <template v-for="item in industryList" :key="item.value">
                  <el-option :label="item.label" :value="item.value" />
                </template>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="客户级别">
              <el-select v-model="leadsData.customerLevel">
                <template v-for="item in customerLevelList" :key="item.value">
                  <el-option :label="item.label" :value="item.value" />
                </template>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="下次联系时间">
              <el-date-picker
                class="custom-date-picker"
                type="datetime"
                v-model="leadsData.nextTime"
                style="width: 100%"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="备注">
              <el-input type="textarea" v-model="leadsData.remarks" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <div></div>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import SectionEl from '../SectionEl.vue'
import { ref } from 'vue'
import { Iphone, Message } from '@element-plus/icons-vue'
import AddressSelect from './AddressSelect.vue'
import OwnerChange from '../OwnerChange.vue'

const leadsData = ref({})

const leadsSourceList = [
  {
    label: '促销',
    value: 1,
  },
  {
    label: '搜索引擎',
    value: 2,
  },
  {
    label: '广告',
    value: 3,
  },
  {
    label: '转介绍',
    value: 4,
  },
]

const industryList = [
  {
    label: 'IT',
    value: 1,
  },
  {
    label: '金融',
    value: 2,
  },
  {
    label: '电子商务',
    value: 3,
  },
  {
    label: '房地产',
    value: 4,
  },
]

const customerLevelList = [
  {
    label: '重点客户',
    value: 1,
  },
  {
    label: '普通客户',
    value: 2,
  },
  {
    label: '非优先客户',
    value: 3,
  },
]

defineExpose({
  leadsData,
})
</script>

<style scoped>
.form-container {
  width: 850px;
  padding: 0 24px;
}

.main {
  border: 1px solid #dfe1e6;
  display: flex;
  height: 100%;
}

.main-left {
  border-right: 1px solid #dfe1e6;
  flex: 1;
  height: 100%;
  overflow: hidden;
}
.main-right {
  flex: 1;
}

.main-body:not(.is-right) {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.main-tabs {
  flex-shrink: 0;
}

.main-select {
  padding: 8px 16px;
}

.el-button.is-text:not(.is-disabled).is-has-bg {
  background-color: #ebecf0;
}

.el-button--selected:not(.is-disabled),
.el-button--selected[aria-expanded='true']:not(.is-disabled) {
  background-color: #344563 !important;
  border-color: #344563 !important;
  color: #fff !important;
}

.main-body-wrap {
  height: calc(100% - 60px);
  padding: 8px 16px;
  position: relative;
}

.main-top {
  border-bottom: 1px solid #dfe1e6;
  line-height: 50px;
  padding: 0 16px;
  position: relative;
}

.use-view {
  height: 100%;
  margin-top: 8px;
  overflow-y: scroll;
  position: relative;
  font-size: 14px;
  height: 100%;
  padding-right: 30px;
}

.letter-block .header {
  height: 21px;
  line-height: 21px;
  position: relative;
}

.letter-block .header > .label {
  background-color: #fff;
  color: #a5adba;
  left: 0;
  padding-right: 8px;
  position: absolute;
  z-index: 2;
}

.letter-block .header > .line {
  background-color: #dfe1e6;
  height: 0.5px;
  left: 0;
  position: absolute;
  right: 0;
  top: 10px;
  z-index: 1;
}

.check-cell {
  align-items: center;
  cursor: pointer;
  display: flex;
  height: 40px;
  line-height: normal;
}

.check-cell .check-cell-content {
  align-items: center;
  display: flex;
  flex: 1;
  flex-shrink: 0;
  margin-left: 8px;
}

.check-cell .xr-avatar {
  flex-shrink: 0;
  margin-right: 8px;
  display: inline-block;
  position: relative;
}

.check-cell .content {
  align-items: center;
  display: flex;
  flex: 1;
  width: 0;
}

.check-cell .content .realname {
  color: #172b4d;
  font-size: 14px;
}

.check-cell .content .dept-name {
  color: #6b778c;
  font-size: 12px;
}

.text-one-line {
  white-space: nowrap;
}

.main-top .clear-btn {
  float: right;
  margin-top: 8px;
}

.hidden-label :deep(.el-checkbox__label) {
  display: none;
}

.hidden-label :deep(.el-checkbox__label) {
  display: none;
}
</style>
